<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" @submit.prevent>
      <!-- 新增所属街道下拉框查询条件 -->
      <el-form-item label="所属街道" prop="streetId">
        <el-select
          v-model="queryParams.streetId"
          placeholder="请选择街道"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="street in streetList"
            :key="street.streetId"
            :label="street.streetAddress"
            :value="street.streetId"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 扫码记录列表 -->
    <el-table v-loading="loading" :data="scanRecordList">
      <el-table-column label="扫码记录ID" align="center" prop="recordId" />
      <el-table-column label="街道ID" align="center" prop="streetId" />
      <el-table-column label="扫码时间" align="center" prop="scanTime">
        <template #default="scope">
          {{ formatDate(scope.row.scanTime) }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listScanRecords } from '@/api/htzj/scanRecords'
import { listStreet } from '@/api/htzj/streets' // 引入获取街道列表的接口
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

// 加载状态
const loading = ref(false)
// 总记录数
const total = ref(0)
// 扫码记录列表
const scanRecordList = ref([])
// 是否显示搜索表单
const showSearch = ref(true)
// 街道列表
const streetList = ref([])
// 获取街道列表
const getStreetList = async () => {
  try {
    const res = await listStreet()
    streetList.value = res
  } catch (error) {
    console.error('获取街道列表失败', error)
  }
}

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  streetId: undefined
})

// 处理查询
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    streetId: undefined
  }
  getList()
}

// 获取扫码记录列表
const getList = async () => {
  loading.value = true
  try {
    const res = await listScanRecords(queryParams.value)
    scanRecordList.value = res.rows
    total.value = res.total
  } catch (error) {
    console.error('获取扫码记录列表失败', error)
    ElMessage.error('获取扫码记录列表失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

onMounted(() => {
  getList()
  getStreetList()
})
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>
